<template>
    <div>
        <el-container>
      <el-aside width="200px">
         <el-menu
         default-active="/"
         class="el-menu-vertical-demo"
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
         @select="onSelect">
           <el-menu-item index="/hou">
            <i class="el-icon-document"></i>
            <span slot="title">后台首页</span>
          </el-menu-item>
          <el-menu-item index="/photo">
            <i class="el-icon-document"></i>
            <span slot="title">相册管理</span>
          </el-menu-item>
          <el-menu-item index="/list">
            <i class="el-icon-document"></i>
            <span slot="title">商品列表</span>
          </el-menu-item>
         </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
     </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
     methods:{
    onSelect(index,indexPath){
      console.log(index,indexPath);
      this.$router.push(index)
    }
  }
}
</script>
<style scoped>
    .el-aside {
    background-color:#545c64;
    color: #333;
    height: 100vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }
</style>